<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>sass</title>
      <link rel="stylesheet" href="./stylesheets/scss.css">
</head>
<body>
      <div id="box">
            <p>我是一个很优秀的 <span>p</span> 标签!</p>
      </div>
      <p> 
            <button class="btn btn-gray-1">我是一个按钮</button>
            <button class="btn btn-gray-2">我是一个按钮</button>
            <button class="btn btn-gray-3">我是一个按钮</button>
            <button class="btn btn-gray-4">我是一个按钮</button>
            <button class="btn btn-gray-5">我是一个按钮</button>
            <button class="btn btn-gray-6">我是一个按钮</button>
            <button class="btn btn-gray-7">我是一个按钮</button>
            <button class="btn btn-gray-8">我是一个按钮</button>
            <button class="btn btn-gray-9">我是一个按钮</button>
      </p>
      <div class="rem">
            REM
      </div>
      <div class="px">
            PX
      </div>
      <p> 
                  <button class="btn btn-mycolor-1">我是一个按钮</button>
                  <button class="btn btn-mycolor-2">我是一个按钮</button>
                  <button class="btn btn-mycolor-3">我是一个按钮</button>
                  <button class="btn btn-mycolor-4">我是一个按钮</button>
                  <button class="btn btn-mycolor-5">我是一个按钮</button>
            </p>
      <div id="pox">
            <p>我也是一个很优秀的 <span>P</span> 标签!</p>
      </div>
</body>
</html>